<template>
    <div>
        <p style="color:orange;font-size: 14px;">
            <i class="el-icon-s-promotion"></i>
            地产详情
        </p>
        <!-- 卡片 -->
        <el-card class="box-card" v-for="item in detailsList" :key="item.id">
            
                <h3>{{ item.title }}</h3>
            <el-row style="height:540px">
                <el-col :span="12">
                    <img :src='item.image' class="image">
                </el-col>
                <el-col :span="12" type="flex">
                    <el-row v-for="i in item.photos">
                        <img :src='i' class="photos" />
                    </el-row>
                    <el-row class="price">
                        <p>{{ item.price }} 元</p>
                    </el-row>
                    <el-row>
                        <mapSearch :list="detailsList"></mapSearch>
                    </el-row>
                </el-col>
            </el-row>
            <el-row>
                <p>{{ item.desc }}</p>
            </el-row>
        </el-card>
    </div>
</template>
<script>
// 地图组件
import mapSearch from '../components/mapSearch.vue'
import { getCateDetails } from '@/api/category'
export default {
    components: {
        mapSearch
    },
    data() {
        return {
            detailsId: "",
            detailsList: {},
           
        }
    },
    created() {
        
        this.detailsId = this.$route.params.id
        console.log('详情id', this.detailsId);

        this.CateDetails()
    },
    
    methods: {
        async CateDetails() {
             const res = await getCateDetails(this.detailsId)
            // const res = await getCateDetails()
            this.detailsList = res.data
            console.log(20, this.detailsList);
        },

    }
}
</script>
<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    /* width: 480px; */
    margin-bottom: 10px;

}
div {
    display: inline-block;
}
/* 图片 */
.image {
    width: 500px;
    height: 500px;
    /* margin: 0 50px; */
    object-fit: cover;
}

.photos {
    margin: 20px;
    width: 140px;
    height: 140px;
}

/* 价格 */
.price.el-row {
    /* text-align: center; */
    margin:0  150px;
    color: orange;
    font-weight: 700;
}
</style>